<!--
 * @Description: 轮播通知
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-01-25 16:59:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-10-14 13:58:45
-->

<template>
  <div v-if="props.list.length > 0" class="broadcast items-center">
    <!-- 第一段 -->
    <div
      class="items-center"
      :class="{
        'broadcast-firstStart': !broadcast.isLoad,
        'broadcast-secondStart': broadcast.isLoad,
      }"
      @animationiteration="broadcastEnd(1)"
    >
      <div
        v-for="item in broadcast.startList"
        :key="item.id"
        class="broadcast-item items-center"
        :style="{
          'min-width': `${broadcast.widthItem}px`,
          'max-width': `${broadcast.widthItem}px`,
        }"
      >
        <div class="broadcast-item-img">
          <Images
            :src="item.avatar"
            :placeholder="imgUrl.avatarDefault"
            isHttp
          ></Images>
        </div>

        <div class="broadcast-item-info items-center">
          <div class="broadcast-item-nick" style="margin-right: 3px">
            {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
            <span style="margin-left: -4px">
              {{ item.nickname && item.nickname.length > 11 ? "..." : "" }}
            </span>
          </div>
          <div class="broadcast-item-nick">{{ $t("lottery.cjtzlb") }}</div>
          <div class="broadcast-item-bdc">{{ item.acquireAmount }}</div>
          <div class="broadcast-item-nick">BDC</div>
        </div>
      </div>
    </div>
    <!-- 第二段 -->
    <div
      class="items-center broadcast-secondStart"
      @animationiteration="broadcastEnd(2)"
    >
      <div
        v-for="item in broadcast.endList"
        :key="item.id"
        class="broadcast-item items-center"
        :style="{
          'min-width': `${broadcast.widthItem}px`,
          'max-width': `${broadcast.widthItem}px`,
        }"
      >
        <div class="broadcast-item-img">
          <Images
            :src="item.avatar"
            :placeholder="imgUrl.avatarDefault"
            isHttp
          ></Images>
        </div>
        <div class="broadcast-item-info items-center">
          <div class="broadcast-item-nick" style="margin-right: 3px">
            {{ item.nickname ? item.nickname.substring(0, 11) : "--" }}
            <span style="margin-left: -4px">{{
              item.nickname && item.nickname.length > 11 ? "..." : ""
            }}</span>
          </div>
          <div class="broadcast-item-nick">{{ $t("lottery.cjtzlb") }}</div>
          <div class="broadcast-item-bdc">{{ item.acquireAmount }}</div>
          <div class="broadcast-item-nick">BDC</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="broadcast">
import { useWindowSize } from "@vant/use";
import { ref, reactive, onMounted, computed } from "vue";
import { getOssFileUrl } from "@/utils";

type Item = {
  nickname: string;
  avatar: string;
  acquireAmount: number;
  id: number;
};

const props = withDefaults(
  defineProps<{
    list: any;
    loop?: boolean;
  }>(),
  {
    list: [],
    loop: false,
  }
);
const emit = defineEmits(["end"]);

const imgUrl = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 获取窗口宽度和高度
const { width, height } = process.client
  ? useWindowSize()
  : { width: ref(320), height: ref(667) };

const broadcast = reactive({
  widthItem: 225, // 每一个信息的宽度
  itemWidthPx: "225px", // 每一个信息的宽度
  itemWidthPxF: "-225px", // 每一个信息的宽度
  endIdx: 0, // 3 也是组件最小长度
  list: [],
  startList: [],
  endList: [],
  pace: 3,
  isLoad: false, // 第一段动画是否加载
});

// 一次动画结束:展示了两段数据
const broadcastEnd = (type: number) => {
  // 1. 赋值新数据
  if (type == 1) {
    broadcast.startList = broadcast.list.slice(
      broadcast.endIdx,
      broadcast.endIdx + broadcast.pace
    );
    if (!broadcast.isLoad) broadcast.isLoad = true;
  }
  if (type == 2) {
    broadcast.endList = broadcast.list.slice(
      broadcast.endIdx,
      broadcast.endIdx + broadcast.pace
    );
  }
  // 2. 重新计算 endIdx
  broadcast.endIdx = broadcast.endIdx + broadcast.pace;
  // console.log(type, "--type--", broadcast.endIdx);

  // 4. 如果设置了循环,则重置要截取的索引值
  if (broadcast.endIdx >= broadcast.list.length && props.loop) {
    broadcast.endIdx = 0;
  } else {
    emit("end");
  }
};

onMounted(() => {
  // mock 数据
  if (props.list.length % 3 !== 0 || props.list.length <= 6) {
    broadcast.list = props.list.concat(props.list).concat(props.list);
  } else {
    broadcast.list = props.list;
  }

  // 初始值,默认broadcast.pace 个数一段,可以自定义,当前是 3 个一段
  broadcast.endIdx = broadcast.pace;
  // 截取第一段
  broadcast.startList = broadcast.list.slice(0, broadcast.endIdx);
  // 截取第二段
  broadcast.endList = broadcast.list.slice(
    broadcast.endIdx,
    broadcast.endIdx + broadcast.pace
  );
  broadcast.endIdx += broadcast.pace; // 注意:数组长度至少大于 6
});
</script>
<style scoped lang="scss">
.broadcast {
  @keyframes leftgroup1 {
    from {
      left: 0;
    }
    to {
      left: calc(v-bind("broadcast.pace") * v-bind("broadcast.itemWidthPxF"));
    }
  }
  @keyframes leftgroup2 {
    from {
      left: calc(v-bind("broadcast.pace") * v-bind("broadcast.itemWidthPx"));
    }
    to {
      left: calc(v-bind("broadcast.pace") * v-bind("broadcast.itemWidthPxF"));
    }
  }

  position: relative;
  width: 100vw;
  height: 30 * 2px;
  overflow: hidden;

  &-firstStart {
    position: absolute;
    animation: leftgroup1 12s linear infinite;
  }
  &-secondStart {
    position: absolute;
    animation: leftgroup2 24s linear infinite;
  }

  &-item {
    align-items: flex-end;
    z-index: 99;
    &-img {
      overflow: hidden;
      min-width: 24 * 2px !important;
      max-width: 24 * 2px !important;
      height: 24 * 2px;
      border-radius: 100px;
      border: 1px solid #007bff;
    }
    &-info {
      z-index: -1;
      height: 18 * 2px;
      position: relative;
      left: -24px;
      padding-left: 32px;
      background: linear-gradient(
        90deg,
        rgba(0, 123, 255, 0.6) 0%,
        rgba(0, 123, 255, 0) 100%
      );
    }
    &-nick {
      color: #002853;
      font-size: 11 * 2px;
      text-wrap: nowrap;
      white-space: nowrap;
    }
    &-bdc {
      margin: 0 4 * 2px;
      color: #ffb800;
      font-size: 11 * 2px;
      font-weight: 590;
    }
  }
}
</style>
